<script setup lang="ts">
import {
  onBeforeMount,
  onBeforeUnmount,
  onMounted,
  reactive,
  ref,
  watch,
  watchEffect
} from "vue";
import { barProps } from "../../components/interface";

const props = withDefaults(defineProps<barProps>(), {
  title: "进度条",
  fetchData: undefined
});

const progress = ref(0);
const status = ref();
const training = ref(false);
const fetching = ref(false); // for the parent component to control whether to continually fetch data

// 使用 子组件引用 改变 progress, status, training, props.fetchData
defineExpose({
  status,
  progress,
  training,
  props,
  fetching
});

watch(
  () => props.fetchData,
  async (newValue, oldValue) => {
    console.log("获取数据函数发生变化", newValue);
    if (newValue != undefined && oldValue === undefined) {
      startTimer();
      status.value = ""
    } else if (newValue === undefined && oldValue != undefined) {
      stopTimer();

      // final fetch
      var data_fetched = await oldValue();

      let pro = data_fetched["progress"]
      let is_train = data_fetched["training"]
      // let sta = ""

      if (!is_train && pro >= 95)
      {
        pro = 100
      }
    
      progress.value = pro;
    
      // 更新状态
      if (progress.value < 100) {
        status.value = "exception"
      } else {
        status.value = "success"
      }
    }
  },{ deep: true }
);

watch(training, (newValue, oldValue) => {
  // 当 model_running 变化时，更新 this.status 的值
  if (newValue === false) {
    console.log("发生了变化，变色");
    // status.value = "success";
    // exception
  } else if (newValue === true) {
    console.log("发生了变化，变色");
    // status.value = "";
  }
});

async function handleTimer() {
  if (props.fetchData && fetching.value) {
    var data_fetched = await props.fetchData();

    // console.log("获取的训练进度：", data_fetched)
    // console.log("progress: ", data_fetched["progress"])
    // console.log("training: ", data_fetched["training"])
    let pro = data_fetched["progress"]
    let is_train = data_fetched["training"]
    // let sta = ""

    if (!is_train && pro >= 95)
    {
      pro = 100
    }
    
    // status.value = sta;
    progress.value = pro;
    training.value = is_train;
  }
}

const timer = ref(null);

function startTimer() {
  // 当 fetchData 传入数据时，启动定时器，每秒调用一次 handleTimer 方法
  if (timer.value === null && props.fetchData) {
    timer.value = setInterval(handleTimer, 1000);
  }
}

function stopTimer() {
  // 停止定时器
  if (timer.value !== null) {
    clearInterval(timer.value);
    timer.value = null;
  }
}

// // 挂载时启动定时器
// onMounted(() => {
//   startTimer();
// });

// // 卸载时取消定时器
// onBeforeUnmount(() => {
//   stopTimer();
// });
</script>

<template>
  <div>
    <h4>
      <span>{{ props.title }}</span>
    </h4>
  </div>
  <div class="demo-progress">
    <el-progress
      :text-inside="true"
      :stroke-width="20"
      :percentage="progress"
      :status="status"
    />
  </div>
</template>

<style scoped lang="scss">
.demo-progress .el-progress--line {
  margin-top: 1vh;
  margin-bottom: 5px;
  // max-width: 600px;
}
</style>
